<div class="houtai-button-list">
    <button type="button" class="btn btn-success">新增</button>
</div>

<div class="houtai-item-list">
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>商品标题</th>
                <th>商品图片</th>
                <th>价格</th>
                <th>商品规格与参数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div class="page-under">

    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".page-under").load(`/shop/page`,function (){
            doGetItems();
        });
    });
    function doGetItems(){
        let url = `/shop/getItems`;
        let pageCurrent = $(".page-under").data("pageCurrent");
        if (!pageCurrent)pageCurrent=1;
        $.ajax({
            url:url,
            data:{"pageCurrent":pageCurrent},
            dataType:"json",
            success(result){
                if(result.status===200){
                    doLoadShopItemPages(result.data);
                    doLoadClick();
                }
            },
            error(){
                alert("获取失败");
            }
        });
    }
    function doLoadShopItemPages(data){
        doLoadShopItems(data.records);
        doinitPage(data);
    }
    function doLoadShopItems(records){
        let tbody = $("tbody");
        tbody.empty();
        for (let i=0;i<records.length;i++){
            let tr = $(`<tr></tr>`);
            tr.data("item",records[i]);
            tr.append(doCreateItems(i+1,records[i]));
            tbody.append(tr);
        }
    }
    function doCreateItems(i,record){
        let size = record.sizeList;
        let sizeName;
        for (let i=0;i<size.length;i++){
            if (i===0){
                sizeName=size[i].sizeName;
                continue;
            }
            sizeName=sizeName+','+size[i].sizeName;
        }
        return `<td>${i}</td>
                <td>${record.title}</td>
                <td><img src="${record.image}"/></td>
                <td>${record.price}</td>
                <td>${sizeName}</td>
                <td>
                    <span>
                        <button type="button" class="btn btn-success">更新</button>
                        <button type="button" class="btn btn-danger">删除</button>
                    </span>
                </td>`;
    }
    function doLoadClick(){
        $(".btn").click(function (){
            let tex = $(this).text();
            if (tex==="新增"){
                let url = `/shop/edititems`;
                $("#mainContentId").removeData("item");
                $("#mainContentId").load(url);
            }else if(tex==="更新"){
                let url = `/shop/edititems`;
                let data = $(this).parents("tr").data("item");
                $("#mainContentId").data("item",data);
                $("#mainContentId").load(url);
            }else if(tex==="删除"){
                if (!confirm("是否删除?")){
                    return ;
                }
                let url = `/shop/deleteitem`;
                let itemId = $(this).parents("tr").data("item").itemId;
                $.ajax({
                    url:url,
                    data:{"itemId":itemId},
                    dataType: "json",
                    success(result) {
                        if (result.status===200){
                            alert("删除成功");
                            doGetShopItems();
                        }
                    },
                    error() {
                        alert("删除失败");
                    }
                });
            }
        });
    }
</script>